<?php
/* @var $this yii\web\View */
$this->registerCssFile('@web/css/style2.css',['depends'=>['frontend\assets\AppAsset']]);
$this->registerCssFile('@web/css/many.css',['depends'=>['frontend\assets\AppAsset']]);
use yii\helpers\Url;
$this->registerJs("
$(document).ready(function(){
    $(\".acc_container:not('.acc_container:first')\").hide();
    $('.acc_trigger').click(function(){
	if( $(this).next().is(':hidden') ) {
            $('.acc_trigger').removeClass('active').next().slideUp();
            $(this).toggleClass('active').next().slideDown();
	}else{
            $(this).toggleClass('active');
            $(this).next().slideUp();
        }
	return false;
    });
});
");
$this->registerCss("
h1 {
	font: 4em normal Georgia, 'Times New Roman', Times, serif;
	text-align:center;
	padding: 20px 0;
	color: #aaa;
}
h1 span { color: #666; }
h1 small{
	font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing: 0.5em;
	display: block;
	color: #666;
}
 
h2.acc_trigger {
	padding: 0;	margin: 0 0 5px 0;
	height: 46px;	line-height: 46px;
	width: 500px;
	font-size: 2em;
	font-weight: normal;
	float: left;
	color:white;
}
h2.acc_trigger a:hover {
	color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
	margin: 0 0 5px; padding: 0;
	overflow: hidden;
	font-size: 1.2em;
	width: 500px;
	clear: both;
	border: 1px solid #d6d6d6;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.acc_container .block {
	padding: 20px;
}
")
?>
<div class="ms-hero ms-hero-material">
    <span class="ms-hero-bg"></span>
    <div class="container">
        <div class="top-content">
            <div class="show-div1" style="margin-left: 200px;" >
                <article>
                    <h2 style="text-align: center;color: white">报名流程 | QQ群<a href="//shang.qq.com/wpa/qunwpa?idkey=0a0e46aab302900fb9c9eb4a8c709fa58257a3eed0fe1265d2b9a7a2ba9b1719" target="_blank">632301856</a> </h2>
                </article>
                    <h2 class="acc_trigger">报名流程一</a></h2>
                    <div class="acc_container" style="display: none;">
                        <div class="block">
                            进行易班注册
                            <br><br><img src="<?=Url::to('@web/images/baoming (1).jpg')?>" style="width: 30%;height: 30%">
                            <br><br>再进行登录
                            <br><br><img src="<?=Url::to('@web/images/baoming (2).jpg')?>" style="width: 50%;height: 50%">
                        </div>
                    </div>
                    <h2 class="acc_trigger active">报名流程二</a></h2>
                    <div class="acc_container" style="display: block;">
                        <div class="block">
                            注册网站的用户信息
                            <br><br><img src="<?=Url::to('@web/images/baoming (3).jpg')?>" style="width: 50%;height: 50%">
                            <br><br>再请填清自己的地址和电话哦~方便我们找到您
                            <br><br><img src="<?=Url::to('@web/images/baoming (4).jpg')?>" style="width: 50%;height: 50%">
                        </div>
                    </div>
                    <h2 class="acc_trigger">报名流程三</a></h2>
                    <div class="acc_container" style="display: none;">
                        <div class="block">
                            再次进行登录
                            <br><br><img src="<?=Url::to('@web/images/baoming (5).jpg')?>" style="width: 50%;height: 50%">
                            <br><br>然后就可以选择一个您感兴趣的项目进行报名
                            <br><br><img src="<?=Url::to('@web/images/baoming (6).jpg')?>" style="width: 50%;height: 50%">
                        </div>
                    </div>
                <h2 class="acc_trigger">报名流程四</a></h2>
                <div class="acc_container" style="display: none;">
                    <div class="block">
                        填写完比赛报名表，提交后即报名成功！
                        <br><br><img src="<?=Url::to('@web/images/baoming (7).jpg')?>" style="width: 50%;height: 50%">
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
